<div class="layui-container" style="margin-top:1em;margin-bottom:6em;">
    <!-- <div class="layui-row">
        <div class="layui-col-lg12" style="margin-bottom:1em;">
            <div class="layui-btn-group">
                <a href="/found/all/0" class="layui-btn layui-btn-sm">默认</a>
                <a href="/found/gif/0" class="layui-btn layui-btn-sm">GIF动图</a>
                <a href="/found/views/0" class="layui-btn layui-btn-sm">浏览量</a>
                <a href="/found/large/0" class="layui-btn layui-btn-sm">大图</a>
            </div>
        </div>
    </div> -->
    <div class="layui-row layui-col-space5" id="found">

        <!-- <div class="layui-col-lg3" id="img-">
            <div class="img_thumb" onmouseover="show_imgcon()" onmouseout="hide_imgcon()">
                <img src="" alt="" layer-src="" lay-src="">
                <div class="imgcon" id="imgcon-"> -->
        <!-- 图片链接 -->
        <!-- <a href="javascript:;" title="图片链接" class="layui-btn layui-btn-xs layui-btn-normal"
                        onclick="showlink('','')"><i class="fa fa-link"></i></a>
                    <a href="" target="_blank" class="layui-btn layui-btn-xs layui-btn-normal"><i
                            class="fa fa-globe"></i></a> -->
        <!-- 用户已登录才显示删除按钮 -->

        <!-- <button class="layui-btn  layui-btn-xs layui-btn-danger" title="删除这张图片"
                        onclick="del_img('','','','')">
                        <i class="fa fa-trash-o"></i>
                    </button> -->
        <!-- 删除按钮end -->
        <!-- </div>
            </div>
        </div> -->
    </div>

    <!-- 分页按钮 -->
    <div class="layui-row" style="margin-top:2em;margin-bottom:5em;">
        <div class="layui-col-lg6" id="img-page">

        </div>
    </div>
    <!-- 分页按钮 -->
</div>
<!-- 这个div是container结束那部分 -->

<div class="layui-row" id="imglink">
    <div class="layui-col-lg10 layui-col-md-offset1">
        <!-- 图片显示区域 -->
        <!-- 显示缩略图 -->
        <div class="layui-col-lg12">
            <div id="img-thumb">
                <a href="" target="_blank">
                    <center><img src="" alt=""></center>
                </a>
            </div>
        </div>
        <!-- 显示地址 -->
        <div class="layui-col-lg12">
            <div id="links">
                <table class="layui-table" lay-skin="nob">
                    <colgroup>
                        <col width="80">
                        <col width="320">
                        <col>
                    </colgroup>
                    <tbody>
                        <tr>
                            <td>URL</td>
                            <td><input type="text" class="layui-input" id="url" data-cip-id="url"></td>
                            <td><a href="javascript:;" class="layui-btn layui-btn-sm" onclick="copyurl('url')">复制</a>
                            </td>
                        </tr>
                        <tr>
                            <td>HTML</td>
                            <td><input type="text" class="layui-input" id="html" data-cip-id="html"></td>
                            <td><a href="javascript:;" class="layui-btn layui-btn-sm" onclick="copyurl('html')">复制</a>
                            </td>
                        </tr>
                        <tr>
                            <td>Markdown</td>
                            <td><input type="text" class="layui-input" id="markdown" data-cip-id="markdown"></td>
                            <td><a href="javascript:;" class="layui-btn layui-btn-sm"
                                    onclick="copyurl('markdown')">复制</a></td>
                        </tr>
                        <tr>
                            <td>BBCode</td>
                            <td><input type="text" class="layui-input" id="bbcode" data-cip-id="bbcode"></td>
                            <td><a href="javascript:;" class="layui-btn layui-btn-sm" onclick="copyurl('bbcode')">复制</a>
                            </td>
                        </tr>
                        <tr>
                            <td>上传日期</td>
                            <td><input type="text" class="layui-input" id="upload-date"></td>
                        </tr>
                        <tr>
                            <td>大小</td>
                            <td><input type="text" class="layui-input" id="size"></td>
                        </tr>
                        <tr>
                            <td>类型</td>
                            <td><input type="text" class="layui-input" id="mime"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 图片显示区域END -->
    </div>
</div>


<script>
    var form = null;
    var laypage = null;
    var flow = null;
    // 数据总条数
    var all = 0;

    // 图片json信息
    var img_json = {
        "title": "", //相册标题
        "id": 1, //相册id
        "start": 0, //初始显示的图片序号，默认0
    };

    var auth = localStorage.getItem('auth');
    // console.log('images-auth: ' + auth);
    if (auth == 'user') {
        var ajax_url = window.config.api_url + 'api/userimgs';
    } else if (auth == 'guest') {
        var ajax_url = window.config.api_url + 'api/guestimgs';
    }

    layui.use(['form', 'laypage', 'flow'], function () {
        form = layui.form;
        laypage = layui.laypage;
        flow = layui.flow;

        // console.log(flow);
        flow.lazyimg({
            elem: '#found img'
        });
        // //图片查看器
        // layer.photos({
        //     photos: '#found',
        //     anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
        // });

        request(ajax_url, 1, 20);
    });


    function request(url, curr = 1, limit = 20) {
        $.ajax({
            url: ajax_url + '?page=' + curr + '&limit=' + limit,
            method: 'get',
            data: {},
            dataType: 'json',
            processData: true,
            cache: false,
            headers: { token: window.config.token, rtime: window.func.getTime() },
            success: function (res) {
                if (res.code == 0) {
                    // console.log(res);
                    showImgList(res.data, curr, limit);
                    all = res.data.all;
                    handlerImgData(res.data.list);
                } else {
                    layer.msg(res.msg, { time: 1000, icon: 2 }, function () {
                        if (res.code == 10001) {
                            localStorage.clear();
                            widnow.location.href = './login.html';
                        }
                    });
                    return false;
                }
            },
            fail: function () {
                window.func.error();
            }
        });
    }



    function showImgList(data, curr, limit) {
        var all = data.all;
        var data = data.list;
        var str = '';
        var forNum = data.length;
        for (var i = 0; i < forNum; i++) {
            str += `
            <div class="layui-col-lg3" id="img-${data[i].id}">
                <div class="img_thumb" onmouseover="show_imgcon(${data[i].id})" onmouseout="hide_imgcon(${data[i].id})">
                    <a href="javascript:;" onclick="checkImg(${data[i].id})">
                    <img src="${data[i].url}" alt="${data[i].filename}" layer-src="${data[i].url}" lay-src="${data[i].url}">
                    </a>
                    <div class="imgcon" id="imgcon-${data[i].id}">
                        <!-- 图片链接 -->
                        <a href="javascript:;" title="图片链接" class="layui-btn layui-btn-xs layui-btn-normal" onclick="showlink('${data[i].url}', '${data[i].size}', '${data[i].mime}', '${data[i].date}', '${data[i].id}')"><i class="fa fa-link"></i></a>
                        <!-- 用户已登录才显示删除按钮 -->

                        `;
            if (window.config.token && localStorage.getItem('auth') == 'user') {
                str += `<button class="layui-btn  layui-btn-xs layui-btn-danger" title="删除这张图片" onclick="del_img(${data[i].id}, ${data[i].uid})"> <i class="fa fa-trash-o"></i> </button> <!-- 删除按钮end --> </div> </div> </div>`;
            } else {
                str += `</div> </div> </div>`;
            }
        }
        $('#found').html(str);
        form.render();

        //执行一个laypage实例
        laypage.render({
            elem: 'img-page', //注意，这里是 ID，不用加 # 号
            count: all, //数据总数，从服务端得到
            curr: curr, // 当前页
            limit: limit, // 每页显示条数
            limits: [4, 8, 16, 32, 48, 56], // 每页限制条数选项
            layout: ['count', 'prev', 'page', 'next', 'limit'], // 排版
            jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if (!first) {
                    //do something
                    request(ajax_url, obj.curr, obj.limit);
                }
            }
        });
    }


    // 处理相册数据格式
    function handlerImgData(list) {
        var data = [],
            info = {},
            len = list.length;
        for (var i = 0; i < len; i++) {
            info.alt = list[i].filename;
            info.pid = list[i].id;
            info.src = list[i].url;
            info.thumb = '';
            data[i] = info;
            info = {};
        }
        img_json.data = data;
    }

    // 显示相册
    function showPhotos() {
        layer.photos({
            photos: img_json,
            anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
        });
    }


    //显示图片操作按钮
    function show_imgcon(id) {
        $("#imgcon-" + id).show();
    }
    //隐藏图片操作按钮
    function hide_imgcon(id) {
        $("#imgcon-" + id).hide();
    }

    //显示图片链接
    function showlink(url, size, mime, date, id) {
        addViews(id);
        layer.open({
            type: 1,
            title: false,
            content: $('#imglink'),
            area: ['680px', '580px'],
            shadeClose: true
        });
        $("#img-thumb a").attr('href', url);
        $("#img-thumb img").attr('src', url);
        $("#url").val(url);
        $("#html").val("<img src = '" + url + "' />");
        $("#markdown").val("![](" + url + ")");
        $("#bbcode").val("[img]" + url + "[/img]");
        $('#upload-date').val(date);
        $('#size').val(size);
        $('#mime').val(mime);
        $("#imglink").show();
    }


    //复制链接
    function copyurl(info) {
        var copy = new clipBoard(document.getElementById('links'), {
            beforeCopy: function () {
                info = $("#" + info).val();
            },
            copy: function () {
                return info;
            },
            afterCopy: function () {

            }
        });
        layui.use('layer', function () {
            var layer = layui.layer;

            layer.msg('链接已复制！', {
                time: 2000
            })
        });
    }


    //删除单张图片
    function del_img(id, uid) {
        layer.confirm('确认删除这张图片？', {
            icon: 3,
            title: '温馨提示！'
        }, function (index) {
            $.ajax({
                url: window.config.api_url + 'api/deleteimg',
                method: 'get',
                data: { id: id, uid: uid },
                dataType: 'json',
                processData: true,
                cache: false,
                headers: { token: window.config.token, rtime: window.func.getTime() },
                success: function (res) {
                    if (res.code == 0) {
                        $("#img-" + id).remove();
                        all -= 1;
                        if (all < 0) {
                            all = 0;
                        }
                        $('#layui-laypage-1 .layui-laypage-count').html('共 ' + all + '条');
                        layer.msg(res.msg, { time: 1000, icon: 1 });
                    } else {
                        layer.msg(res.msg, { time: 1000, icon: 2 });
                    }
                },
                fail: function () {
                    widnow.func.error();
                }
            });

            layer.close(index);
        });
    }


    function addViews(id) {
        $.ajax({
            url: window.config.api_url + 'api/addviews',
            method: 'get',
            data: { id: id, auth: auth },
            dataType: 'json',
            processData: true,
            cache: false,
            headers: { token: window.config.token, rtime: window.func.getTime() },
            success: function (res) {

            },
            fail: function () {
                window.func.error();
                return false;
            }
        });
    }


    // 点击图片行为
    function checkImg(id) {
        addViews(id);
        showPhotos();
    }
</script>